// 函数组件和函数的区别
// 函数是小写开头，函数组件是大写开头
// 函数组件必须要大写开头
// 函数必须要返回内容，如果不需要渲染内容，可以返回null。不能返回undefined否则会报错

//通过解构的方式解构出来createRoot
import { createRoot } from 'react-dom/client';

// 这是一个函数，函数表达式
function hello() {
  return <h3>我是hello函数</h3>;
}

// 这是一个函数组件
function HandleHello() {
  return <h3>我是Hello函数组件</h3>;
}
// 箭头函数组件写法
const HandleHello2 = () => {
  return <h3>我是HandleHello2箭头函数组件</h3>;
};
const HandleHello3 = () => <h3>我是HandleHello3箭头函数组件</h3>;

const divNode = (
  <>
    {hello()}
    <HandleHello></HandleHello>
    <HandleHello2></HandleHello2>
    <HandleHello3></HandleHello3>
  </>
);

// 这是React18版本新出的挂载节点的方法
const root = createRoot(document.getElementById('root'));
root.render(divNode);
